import React, { CSSProperties } from 'react'
import CommonNav from '../../components/CommonNav/CommonNav'
import { Box, Input } from '@material-ui/core'
import Message from '../../components/Message/Message'
import { userReg,RegAns,userLogin,LoginAns } from '../../api/user'
import { withRouter, RouteComponentProps,Link } from 'react-router-dom'
import {inject,observer} from 'mobx-react'
import UserStore from '../../store/modules/userStore'

const RegStyle: CSSProperties = {
    minHeight: '100vh',
    paddingTop: '9vh',
    backgroundColor: '#fff'
}
const titleStyle: CSSProperties = {
    padding: '3vh 10vw',
    color: '#333',
    fontSize: '20px',
    fontWeight: 'bolder'
}
const formStyle: CSSProperties = {
    width: '100vw',
    padding: '0 12vw'
}
const btnStyle: CSSProperties = {
    width: '100%',
    padding: '1.5vh',
    textAlign: 'center',
    backgroundColor: '#9c27b0',
    borderRadius: '30px',
    color: '#fff',
    fontWeight: 'bolder',
    marginTop: '5vh'
}
const goLoginStyle: CSSProperties = {
    textAlign: 'right',
    margin: '2vh 0',
    fontSize: '12px'
}
const labelStyle: CSSProperties = {
    fontSize: '12px',
    marginTop: '4vh',
    marginBottom: '.5vh',
    display: 'block'
}
interface IProps extends RouteComponentProps {
    userStore?: UserStore
}
const Reg = (props: IProps) => {
    const accountReg = /^[a-z0-9_-]{3,16}$/
    const pwdReg = /^[a-z0-9_-]{6,18}$/
    const nickNameReg = /^.{2,8}$/
    const [account,setAccount] = React.useState<string>('')
    const [pwd,setPwd] = React.useState<string>('')
    const [nickName,setNickName] = React.useState<string>('')
    const [flag,setFlag] = React.useState<boolean>(false)
    React.useEffect(() => {
        if(props.userStore?.isLogin){
            props.history.go(-1)
            Message('info','请勿重复登录或注册')
        }
    },[ ])// eslint-disable-line react-hooks/exhaustive-deps
    const testForm = () => {
        if(accountReg.test(account) && pwdReg.test(pwd) && nickNameReg.test(nickName)){
            setFlag(true)
        }else{
            setFlag(false)
        }
    }
    const handleReg = () => {
        if(flag){
            userReg(account,pwd,nickName)
                .then(res => {
                    const {code,msg} = res as unknown as RegAns
                    if(code === 200){
                        userLogin(account,pwd)
                            .then(result => {
                                const loginRes = result as unknown as LoginAns
                                if(loginRes.code === 200){
                                    localStorage.setItem('token',loginRes.token)
                                    props.userStore?.login()
                                    props.userStore?.getUserInfo()
                                    Message('success','注册成功，已为您进行登录，即将跳转到个人页面')
                                    setTimeout(() => {
                                        props.history.push('/profile')
                                    },1500)
                                }
                            })
                    }else{
                        Message('error',msg)
                    }
                })
        }else{
            Message('warning','请按照要求填写表单后注册')
            setAccount('')
            setPwd('')
            setNickName('')
        }
    }
    return (
        <div style={RegStyle}>
            <CommonNav isBack={true} text='注册' />
            <div style={titleStyle}>
                新用户注册
            </div>
            <Box component='form' style={formStyle}>
                <label style={labelStyle}>长度为3-16为的英文字符或数字</label>
                <Input placeholder='请输入账号' color='secondary' fullWidth={true} value={account} onBlur={testForm} onChange={(e) => {
                    setAccount(e.target.value)
                }}/>
                <label style={labelStyle}>长度为6-18位的英文字符或数字</label>
                <Input placeholder='请输入密码' color='secondary' fullWidth={true}  type='password' value={pwd} onBlur={testForm} onChange={(e) => {
                    setPwd(e.target.value)
                }}/>
                <label style={labelStyle}>长度为2-8位的所有字符</label>
                <Input placeholder='请输入昵称' color='secondary' fullWidth={true} value={nickName} onBlur={testForm} onChange={(e) => {
                    setNickName(e.target.value)
                }}  />
                <div style={btnStyle} onClick={handleReg}>
                    注册/登录
                </div>
                <div style={goLoginStyle}>
                    <span>已有账号？</span><Link to='/login' style={{color: '#9c27b0'}}>去登录</Link>
                </div>
            </Box>
        </div>
    )
}

export default withRouter(inject('userStore')(observer(Reg)))